<template>
  <div ref="Scatterplot" :class="className" :style="{ height: height, width: width }" />
</template>

<script setup name="Scatterplot">
import * as echarts from 'echarts'
import { toRefs } from 'vue'

const Scatterplot = ref(null)
const animationDuration = ref(3000)

const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '500px'
  },
  elementData: {
    type: Object,
    default: undefined
  }
});

const { className, width, height, elementData } = toRefs(props)

watch(elementData, (newValue, oldValue) => {
  initChart()
})

/** 初始化图标 */
function initChart() {
  if (Scatterplot.value) {
    var myChart = echarts.init(Scatterplot.value);

    let option = {
      title: {},
      tooltip: {
        trigger: 'item'
      },
      legend: {},
      xAxis: {},
      yAxis: {},
      series: [
        {
          type: 'scatter',
          itemStyle: {
            normal: {
              label: {
                position: [5, 9],
                show: true,
                formatter: function (params) {
                  if (params.value.length > 2) {
                    return params.value[2]
                  }
                  return ''
                }
              }
            }
          },
          symbolSize: 20
        }
      ]
    }

    if (elementData.value) {
      if (elementData.value.element.titleText) {
        option.title.text = elementData.value.element.titleText
      }
      if (elementData.value.element.titleSubtext) {
        option.title.subtext = elementData.value.element.titleSubtext
      }
      if (elementData.value.element.titleLeft) {
        option.title.left = elementData.value.element.titleLeft
      }
      if (elementData.value.element.tooltip) {
        option.tooltip.show = elementData.value.element.tooltip
      }
      if (elementData.value.element.legend) {
        option.legend.show = elementData.value.element.legend
      }
      if (elementData.value.element.legendLeft) {
        option.legend.left = elementData.value.element.legendLeft
      }
      // if (elementData.value.seriesName) {
      //   option.series[0].name = elementData.value.seriesName
      // }
      if (elementData.value.series) {
        // let seriesData = []
        // for (let index in elementData.value.series) {
        //   seriesData.push({
        //     value: elementData.value.series[index].data,
        //     name: elementData.value.series[index].name
        //   })
        // }
        option.series[0].data = elementData.value.series
      }
      // if(elementData.value.yAxis){
      //   let indicatorData = []
      //   for(let index in elementData.value.yAxis){
      //     indicatorData.push({
      //       name: elementData.value.yAxis[index]
      //     })
      //   }
      //   option.radar.indicator = indicatorData
      // }
    }

    setTimeout(() => {
      console.log(option)
      myChart.setOption(option)
      myChart.resize()
    }, 0);
  }
}

initChart();
</script>
